﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link th:href="@{/css/menu.css}" rel="stylesheet"/>
    <style>
        .layui-table-cell {
            height: auto;
            text-align: left;
            line-height: normal;
            overflow: visible;
        }

        .layui-table-cell .title {
            padding: 5px 0;
        }

        .layui-table-cell .layui-row {
            line-height: 20px;
        }

        .layui-table-cell .layui-col-md8 {
            color: #ccc;
            font-size: 12px;
        }

        .layui-table-header {
            display: none;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin" id="note-layout">
    <div class="layui-side" style="background: #f5f5f5;">
        <div class="layui-row " style="padding: 5px 10px;border-bottom: 1px solid #ccc;">
            <div class="layui-col-md6" style="line-height: 30px;">
                个人笔记
            </div>
            <div class="layui-col-md6" style="text-align: right;line-height: 30px;">
                <a data-id="2" class="layui-btn layui-btn-normal layui-btn-xs action-catalog_add_note">新增类目</a>
            </div>
        </div>
        <div class="" id="note-catalog-data"></div>
    </div>
    <div class="layui-side" style="background: white;left: 250px;border-right: 1px solid #eee;">
        <div class="layui-body-nav">云笔记 / 笔记列表 <a data-id="2"
                                                  class="layui-btn layui-btn-normal layui-btn-xs action-add_note">添加笔记</a>
        </div>
        <table class="layui-hide" id="table-note" lay-filter="table-note"></table>
    </div>
    <div class="layui-body" style="top: 0px;left: 500px;" id="layui-body-note">
    </div>
</div>
<script type="text/html" id="barSetting">
    <a class="layui-btn layui-btn-xs" lay-event="show">查看</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="history">历史</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<!-- layui规范化用法 -->
<script type="text/javascript">
    var catalogId = 0;
    var table = null;
    var layedit = null;
    var form = null;
    workUtils.onclick(".layui-icon-menu", function (c) {
        $(".widget-menu").hide();
        $(c).next().toggle();
        return false;
    });
    workUtils.onclick(".layui-rowitem", function (c) {
        catalogId = $(c).attr("data-id");
        loadNote(catalogId);
        $("#note-catalog-data .layui-rowitem-active").removeClass("layui-rowitem-active");
        $(c).addClass("layui-rowitem-active");
    });
    workUtils.onclick(".action-catalog_add_note", function (e) {
        workUtils.open({url: "../web/note/addcatalog.html", title: "添加类目"}, function () {
            loadNoteCatalog();
        });
    });
    workUtils.onclick( ".action-catalog_edit_note", function (c) {
        var id = $(c).attr("data-id");
        workUtils.put("id", id);
        workUtils.open({url: "../web/note/addcatalog.html", title: "修改类目"}, function () {
            loadNoteCatalog();
        });
    });
    workUtils.onclick(".action-catalog_delete_note", function (c) {
        var id = $(c).attr("data-id");
        workUtils.delete('../note/deletecatalog/' + id, function () {
            loadNoteCatalog();
        });
    });
    workUtils.onclick(".action-history", function (c) {
        var id = $(c).attr("data-id");
        workUtils.put("id", id);
        workUtils.open({url: "../web/note/history.html", title: "历史版本",width:'1100px',height:"600px"})
    });
    workUtils.onclick(".action-share", function (c) {
        var id = $(c).attr("data-id");
        workUtils.put("id", id);
        workUtils.open({url: "../web/note/share.html", title: "分享",width:'600px'})
    });
    workUtils.onclick(".action-delete", function (c) {
        var id = $(c).attr("data-id");
        workUtils.delete('../note/delete/' + id, function () {
            loadNote(catalogId);
        })
    });
    workUtils.onclick(".action-add_note", function () {
        workUtils.put("catalogId",catalogId);
        loadNoteFirst();
    });
    function loadNote(catalogId) {
        table.reload("table-note", {
            where: {
                catalogId: catalogId
            }
        });
    }

    function loadNoteCatalog() {
        workUtils.ajaxGet('../note/listcatalog', {}, function (data) {
            var html = '<div>';
            html += '<div class="layui-row layui-rowitem layui-rowitem-active" data-id="0"><div class="layui-col-md12" style="line-height: 30px;">';
            html += '全部笔记</div></div>';
            for (var i = 0; i < data.length; i++) {
                var item = data[i];
                html += '<div class="layui-row layui-rowitem" data-id="' + item.id + '">';
                html += '<div class="layui-col-md8" style="line-height: 30px;"><i class="fa fa-folder"></i>' + item.title + "</div>";
                html += workUtils.buildMenu1(item.id, {
                    catalog_edit_note: "编辑", catalog_delete_note: "删除"
                });
                html += "</div>";
            }
            html += '</div>';
            $('#note-catalog-data').html(html);
        })
    }

    $(document).ready(function () {
        loadNoteCatalog();
        loadNoteFirst();
    });

    function loadNoteFirst(noteId) {
        workUtils.put("id", noteId);
        workUtils.html({
            url: "../web/note/add.html",
            id: 'layui-body-note'
        }, function () {
        });
    }

    layui.use(['layer', 'table'], function () {
        table = layui.table;
        table.render({
            elem: '#table-note'
            , url: '../note/list'
            , height: 'full-100'
            , cols: [[
                {field: 'name', title: '标题', align: 'left', event: 'edit'}
            ]]
            , page: {
                layout: ['prev', 'next'],
                prev:'上一页',
                next:'下一页',
            }
            , cell: function (field, item) {
                if (field == "created") {
                    return workUtils.toDate(item.created);
                } else if (field == "name") {
                    var html = '<div class="title">' + item.name + '</div>';
                    html += '<div class="layui-row">';
                    html += '<div class="layui-col-md8">';
                    html += workUtils.toDate(item.created) +' V'+item.version;
                    html += '</div>';
                    html += '<div class="layui-col-md4  menu-bars">';
                    html += '<i class="layui-icon layui-icon-menu" style="font-size: 30px; color: #1E9FFF;">&#xe65f;</i>  ';
                    html += '<dl class="widget-menu">';
                    html += '<dd  data-id="' + item.id + '" class="action-history">历史</dd> ';
                    html += '<dd  data-id="' + item.id + '" class="action-delete">删除</dd> ';
                    html += '<dd  data-id="' + item.id + '" class="action-share">分享</dd> ';
                    html += '</dl></div>';
                    html += '</div>';
                    return html;
                }
                return item[field];
            }
        });
        //监听工具条
        table.on('tool(table-note)', function (obj) {
            var data = obj.data;
            loadNoteFirst(data.id);
        });
    });

</script>
</body>
</html>